<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">

    <he v-on:dosize="addSizeS"></he>
    <he v-on:dosize="addSizeS"></he>
    <button @click="tagAdd">总点击数：{{tagCount}}</button>

</div>

<script>
    Vue.component(
        "he", {
            data(){
                return{
                    tag: 10
                }
            },
            props: {
                bgColor: {
                    type: String,
                    default: "coral"
                }
            },
            template: `<div v-on:click="doClick"style="border-radius: 50%;text-align: center" :style="addCircle">{{tag}}</div>`,
            computed: {
                addCircle() {
                    var size = 10 * this.tag + "px";
                    return {
                        "background-color": this.bgColor,
                        "width": size,
                        "height": size,
                        "line-height": size,
                    }
                }
            },
            methods: {
                doClick: function () {
                    this.tag++;
                    //发送之后，在父组件模板中使用v-on:dosizeevent="xxxClick"的形式进行监听
                    //注意啊，事件名不要有大写，否则无法监听到。原因可能是html的属性不允许大写的原因。
                    this.$emit("dosize");
                }
            }

        }
    );
    new Vue({
        el: '#app',
        data: {
            tagCount: 10
        },
        methods: {
            tagAdd: function (el) {
                // this.tagCount++;
            },
            addSizeS: function () {
                this.tagCount++;
            }

        }
    })
</script>
</body>
</html>